import React, { Component } from "react";
import PubSub from "pubsub-js";
import "./index.css";
export default class List extends Component {
  state = {
    //初始化状态
    users: [],
    isFirst: true,
    isLoading: false,
    err: "",
  };

  // 挂载完毕生命周期
  componentDidMount() {
    //消息订阅
    this.token = PubSub.subscribe("张三", (_, data) => {
      this.setState(data);
    });
  }

  // 组件将要被卸载
  componentWillUnmount() {
    // 取消订阅;
    PubSub.unsubscribe(this.token);
  }

  render() {
    const { users, isFirst, isLoading, err } = this.state;
    return (
      <div className="row">
        {isFirst ? (
          <h2>欢迎使用，输入关键字 ，随后点击搜索</h2>
        ) : isLoading ? (
          <h2>Loading......</h2>
        ) : err ? (
          { err }
        ) : (
          users.map((item) => {
            return (
              <div className="card" key={item.id}>
                <a rel="noreferrer" href={item.html_url} target="_blank">
                  <img
                    alt=""
                    src={item.avatar_url}
                    style={{ width: "100px" }}
                  />
                </a>
                <p className="card-text">{item.login}</p>
              </div>
            );
          })
        )}
      </div>
    );
  }
}
